<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>领域建模工具</title>
		<link rel="stylesheet" href="css/layout.css" />
		<link rel="stylesheet" href="css/umlCanvas.css" />
		<style>
			.left{
				width:344px;
				float:left;
				height:100%;
			}
			.right{
				margin-left:355px;
				height:100%;
			}
			#projectExplorer{
				border:#3879d9 1px solid;
				min-height:300px;
				margin-bottom:6px;
				padding:4px;
			}
			
			.label{
				display:inline-block;
				width:70px;
			}
			select,input[type="text"],textarea{
				display:inline-block;
				resize:none;
				width:200px;
			}
			input[type="checkbox"]{
				vertical-align:text-bottom;
			}
			/*tab样式*/
			.dialog{
				width:344px;
			}
			.panel > div{
				margin:10px 0;
			}
			.tabs{
				border:#3879d9 1px solid;
				padding:0 3px;
				margin:0 0 -1px 0;
			}
			.tab{
				display: inline-block;
				margin-left:3px;
				margin-bottom:-2px;
				border:1px #3879d9 solid;
				border-bottom: none;
				padding:1px 4px;
				margin-top:10px;
				cursor:pointer;
			}
			.tab.active{
				background:#FFFFFF;
			}
			.panels{
				border:#3879d9 1px solid;
			}
			.panel{
				padding:10px;
				display:none;
			}
			.panel.active{
				display:block;
			}
			#layout > .header ,#layout > .footer{
				clear:both;
				margin:6px 0;
				text-align:center;
				border:1px #3879d9 solid;
			}
			#layout >  .header{
				height:60px;
			}
		</style>
	</head>
	<body>
		<div id="layout">
			<div class="header"></div>
			<div>
				<div class="left">
					<div class="project_tree" id="projectExplorer">
						<div class="panel-heading">项目列表</div>
						<div id="projectTree" class="tree tree-unselectable"></div>
					</div>
					<!-- 编辑对话框 -->
					<div id="dialog_container"></div>
				</div>
				
				<div class="right">
					<div class="main_panel">
						<div class="tabs">
							<div class="tab active" for="index">主页</div>
						</div>
						<div class="panels">
							<div class="panel index active" style="text-align:center;">
								<h1>欢迎使用领域建模工具</h1>
								<p class="welcome">
									Here is your dashboard, you can <strong>create</strong> a new project or <strong>clone</strong> the examples. Invite your teammates to work (in real-time) on yours models using the share settings.  For any help, write in the
									<a class="gwt-Anchor">feedback area</a>
									, we gladly help you out. Enjoy collaborative modeling!
								</p>
								<img src="images/koala-domain-model-tool-demo.png" alt="示例图">
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="footer">Copyright @koala, All rights reserved.</div>
		</div>


		
		<!-- 一些共用模板 -->
		<div id="template" style="display: none;">
			<!-- 线条模板 -->
			<svg id="line-template" style="">
				<!-- 继承关系连线模板 -->
				<g class="line extends templine">
					<polyline points="0,0 0,0" style="marker-end:url(#arrow1)"></polyline>
					<text x="20" y="30">说明文字</text>
				</g>
				<!-- 实现关系连线模板 -->
				<g class="line implements templine">
					<polyline points="0,0 0,0" style="marker-end:url(#arrow1);stroke-dasharray:5"></polyline>
				</g>
				<!-- 聚合关系连线模板 -->
				<g class="line aggregate templine">
					<polyline points="0,0 0,0" style="marker-start:url(#arrow2)"></polyline>
				</g>
				<!-- 组合关系连线模板  -->
				<g class="line compose templine">
					<polyline points="0,0 0,0" style="marker-start:url(#arrow3)"></polyline>
				</g>
				<!-- 关联关系连线模板  -->
				<g class="line associate templine"><polyline points="0,0 0,0"></polyline></g>
			</svg>
			
			<!-- 节点模板 -->
			<div id="node-template">
				<!-- 实体模板 -->
				<div class="node entity">
					<div class="header">
						<span>«</span><span class="entityType">Entity</span><span>»</span>
						<div class="name">Entity</div>
					</div>
					<div class="properties"></div>
					<div class="actions"></div>
				</div>
				
				<!-- 接口模板 -->
				<div class="node interface">
					<div class="header">
						<div>«interface»</div>
						<div class="name">Interface</div>
					</div>
					<div class="actions"></div>	
				</div>
				
				<!-- 枚举模板  -->
				<div class="node enum">
					<div class="header">
						<div>«enum»</div>
						<div class="name">Enum</div>
					</div>
					<div class="enumItems"></div>
				</div>
				
				<!-- 属性模板  -->
				<div class="property">
					<div class="propertyName">property</div>
					<div> : </div>
					<div class="propertyType">String</div>
					<div class="genericity" style="display:none;">&lt;<span class="value"></span>&gt;</div>
				</div>
				
				<!-- 枚举项模板 -->
				<div class="enumItem">ENUMITEM</div>
				
				<!-- 行为模板 -->
				<div class="action">
					<div class="actionName">action</div>
					<span>(</span>
					<div class="parameters" style="min-width:10px;">ssss</div>
					<span>) : </span>
					<div class="returnType">void</div>
				</div>
				
				<!-- 行为的参数模板 -->				
				<div class="parameter" sortNumber="1">
					<div class="parameterType">Post</div>
					<div class="parameterName">post</div>
				</div>
			</div>
		</div>
		<!-- 以下内在多个画板时的情况下可以共用 ，包括图形的模板、右键菜单等元素-->
		<!-- uml元素模板 -->
		<svg>
			<defs>
				<!-- 空心三角形 -->
				<marker id="arrow1" markerWidth="100" markerHeight="100" refx="16" refy="13" orient="auto">
					<path d="M10,10 L16,13 L10,16 z" style="fill:#CCFFCC;stroke-dasharray:0;stroke-width:1;"></path>
				</marker>
			    <!-- 空心菱形 -->
			  	<marker id="arrow2" markerWidth="100" markerHeight="100" refx="10" refy="13" orient="auto">
			    	<path d="M10,13 L16,10 L22,13 L16,16 L10,13 z" style="fill:#CCFFCC;stroke-dasharray:0;stroke-width:1;"></path>
			    </marker>
			    <!-- 实心菱形 -->
			    <marker id="arrow3" markerWidth="100" markerHeight="100" refx="10" refy="13" orient="auto">
			    	<path d="M10,13 L16,10 L22,13 L16,16 L10,13 z" style="fill:#5890c1;stroke-dasharray:0;stroke-width:1;"></path>
			    </marker>
			</defs>
		</svg>
		<!-- 各种右键编辑菜单 -->
		<div id="edit_contextmenus">
			<!-- 添加节点成员的右键菜单 -->
			<div id="add_members" class="contextmenu">
				<div class="contextmenu_item add_property"><div>添加属性</div></div>
				<div class="contextmenu_item add_action"><div>添加行为</div></div>
				<div class="contextmenu_item add_enumItem"><div>添加枚举项</div></div>
				<div class="contextmenu_item delete"><div>删除</div></div>
			</div>
			
			<!--  -->
			<div id="add_nodes" class="contextmenu">
				<div class="contextmenu_item add_entity"><div>添加实体</div></div>
				<div class="contextmenu_item add_interface"><div>添加接口</div></div>
				<div class="contextmenu_item add_enum"><div>添加枚举</div></div>
			</div>
			
			<!-- 编辑线条的右键菜单  -->
			<div id="edit_lines" class="contextmenu">
				<div class="contextmenu_item delete"><div>直线</div></div>
				<div class="contextmenu_item delete"><div>折线</div></div>
				<div class="contextmenu_item delete"><div>删除</div></div>
			</div>
		</div>
		
		
		<!-- 编辑对话框的模板 -->
		<div id="dialog-template">
			<div class="dialog entity_dialog">
				<div class="tabs">
					<div class="tab active" for="entity_panel">实体</div>
					<div class="tab" for="property_panel">属性</div>
					<div class="tab" for="action_panel">行为</div>
				</div>
				<div class="panels">
					<!-- 实体面板 -->
					<div class="panel entity_panel active">
						<div>
							<div class="label">实体名</div>
							<input class="name" name="name" type="text"/>
						</div>
						<div>
							<div class="label">实体类型</div>
							<select class="entityType" name="entityType" style="height:22px;">
								<option value="Entity">Entity</option>
								<option value="AbstractEntity">AbstractEntity</option>
								<option value="ValueObject">ValueObject</option>
								<option value="MappedSuperClass">MappedSuperClass</option>
							</select>
						</div>
						<div>
							<div class="label">实体范围</div>
							<select class="entityScope" name="entityScope" style="height:22px;">
								<option value="public">public</option>
								<option value="private">private</option>
								<option value="protected">protected</option>
								<option value="package">package</option>
							</select>
						</div>
						<div>
							<div class="label" style="vertical-align:top;">备注</div>
							<textarea class="desc" name="description" style="height:100px;margin-top:2px;"></textarea>
						</div>
					</div>
					
					<!-- 属性面板 -->
					<div class="panel panel property_panel">
						<div>
							<div class="label">属性名</div>
							<input type="text" class="propertyName" name="name"/>
						</div>
						<div>
							<div class="label">可见性</div>
							<select style="height:22px;" class="scope" name="scope">
								<option value="public">public</option>
								<option value="private">private</option>
								<option value="protected">protected</option>
								<option value="package">package</option>
							</select>
						</div>
						<div>
							<div class="label">类型</div>
							<input type="text" class="propertyType" name="type" list="type_tip"/>
						</div>
						<div>
							
						</div>
						<div>
							<table style="font-size:14px">
								<tr>
									<td><input type="checkbox" name="isUnique"/>isUnique</td>
									<td><input type="checkbox" name="isStatic"/>isStatic</td>
									<td><input type="checkbox" name="isOrdered"/>isOrdered<br/></td>
								</tr>
								<tr>
									<td><input type="checkbox" name="isDerived"/>isDerived</td>
									<td><input type="checkbox" name="isLeaf"/>isLeaf</td>
									<td><input type="checkbox" name="isReadOnly"/>isReadOnly</td>
								</tr>
							</table>
						</div>
						<table class="properties" border="1" width="100%" cellspacing=0 style="font-size:14px">
							<tr class="property">
								<th>属性名</th>
								<th>属性类型</th>
								<th>初始值</th>
							</tr>
						</table>
					</div>
					
					<!-- 行为面板 -->
					<div class="panel action_panel">
						<div>
							<div class="label">行为名</div>
							<input class="actionName" type="text"/>
						</div>
						<div>
							<div class="label">作用范围</div>
							<select class="actionScope" style="height:22px;">
								<option value="public">public</option>
								<option value="private">private</option>
								<option value="protected">protected</option>
								<option value="package">package</option>
							</select>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 接口对话框 -->
			<div class="dialog interface_dialog">
				<div class="tabs">
					<div class="tab active" for="me">实体</div>
					<div class="tab" for="her">属性</div>
				</div>
				<div class="panels">
					<div class="panel interface_panel active">
						<div>
							<div class="label">实体名</div>
							<input name="name" type="text"/> 
						</div>
						<div>
							<div class="label">实体范围</div>
							<select class="scope" name="entityScope" style="height:22px;">
								<option value="public">public</option>
								<option value="private">private</option>
								<option value="protected">protected</option>
								<option value="package">package</option>
							</select>
						</div>
						<div>
							<div class="label" style="vertical-align:top;">备注</div>
							<textarea class="desc" name="description" style="height:100px;margin-top:2px;"></textarea>
						</div>
					</div>
					<div class="panel panel_action her">
						<div>
							<div class="label">行为名</div>
							<input class="actionName" type="text"/>
						</div>
						<div>
							<div class="label">作用范围</div>
							<select class="actionScope" style="height:22px;">
								<option value="public">public</option>
								<option value="private">private</option>
								<option value="protected">protected</option>
								<option value="package">package</option>
							</select>
						</div>
					</div>
				</div>
			</div>	
		</div>
		<datalist id="property_type_tip" style="display: none;">
			<option value="String"></option>
			<option value="Set"></option>
			<option value="List"></option>
			<option value="Date"></option>
			<option value="Long"></option>
			<option value="Integer"></option>
		</datalist>
		<script type="text/javascript" src="lib/jquery-2.1.0.min.js" ></script>
		<script type="text/javascript" src="lib/bootstrap-3.1.1/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/jqueryUmlCanvas.js" ></script>
		<script type="text/javascript" src="lib/tiny.tree.min.js" ></script>
		<script type="text/javascript" src="js/editDialog.js"></script>
		<script type="text/javascript" src="js/tool.js" ></script>
		<script type="text/javascript" src="plugins/inlineedit/jquery.miniedit.js" ></script>
		<script src="js/main.js"></script>
		<script>
			
		</script>
	</body>
</html>
